<template>
    <div>
        语法：3种模式
        v-for="item in items"
        v-for= "(别名, 索引) in 原数组"
        v-for= "(别名, 索引) in 原数组" :key="别名.id",索引
    </div>
    <h1>校园班级管理系统</h1>

    <div>
        <span>学生信息：</span>
        <li v-for="(item,index) in students">
            {{index}} -- {{ item }}</li>
        <span>学生详情信息</span>
        <ul>
            <!--在使用v-for的时候 哪个标签需要循环 就在哪个标签内加v-for即可-->
            <li v-for="(obj,index) in stuarr">
                {{ obj.name }}--{{ index }}
                {{ obj.age }}--{{ index }}
                {{ obj.sex }}--{{ index }}
                {{ obj.hobby }} --{{ index }}
            </li>
        </ul>
        <div v-for="(item,index) in teaObj">
            {{index}} -- {{ item }}
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
const students = ref(["白小纯","萧炎","美杜莎","萧薰儿"])
const stuarr = ref([
    { name: '白小纯', age: 18, sex: '男', hobby: '炼丹' },
    { name: '萧炎', age: 18, sex: '男', hobby: '炼丹' },
    { name: '美杜莎', age: 28, sex: '女', hobby: '萧炎' },
    { name: '萧薰儿', age: 18, sex: '女', hobby: '萧炎' },
])
const teaObj = reactive({
    name: '药老',
    class: '星辰阁',
    hobby:'鞭策萧炎'
})
</script>

<style lang="scss" scoped>

</style>